<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Hello Go-Server</title>
    <style type="text/css">
        body {text-align: center;}
        .wrap {margin: 40px auto; text-align: left; width: 900px;}
    </style>
</head>
<body>
    <div class="wrap">
       <h2>Hello Go-Server</h2>
        <p>
            <label for="txt-name">Name</label>
            <input type="text" id="txt-name" name="name" value="小Gee" />
            <button id="btn-say">Click</button>
        </p>
        <p id="tips-result"></p>
    </div>
    <script type="text/javascript">
        document.querySelector("#btn-say").addEventListener("click", function() {
            const name = document.querySelector("#txt-name").value;
            fetch("/api/say?name=" + encodeURIComponent(name))
            .then(response => response.json())
            .then((data) => {
                document.querySelector("#tips-result").innerHTML = data.result.message||"Error: query api/say failed!";
            });
        });
    </script>
</body>
</html>